<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body{
            font: 18px "Microsoft YaHei UI";
            margin: 0;
        }
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        header a:hover{
            color: #0aa1ed;
        }
        /*去掉自带的内边距*/
        .el-table .el-table__cell{
            padding: 0;
        }
        .p_img:hover{
            position: relative;
            bottom: 5px;
            /*元素的阴影:x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="padding: 0;height: 150px">
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.png"
                     style="width: 300px;vertical-align: middle" alt="">
                <span>
                    <a href="/">首页</a><el-divider direction="vertical"></el-divider>
                    <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
                    <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                    <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">帮助中心</a>
                </span>
            </div>
            <!--蓝色导航条开始-->
            <div style="width: 100%;height: 60px;background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                        :default-active="currentIndex"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#82c8ec"
                        text-color="#fff"
                        active-text-color="#fff" >
                    <el-menu-item :index="c.id+''" v-for="c in categoryArr"> {{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 15px">
                        <el-input size="mini" @keydown.native.enter="search()" placeholder="请输入关键字搜索" v-model="wd"></el-input>
                        <el-button style="position: absolute;
                        background-color: rgba(0,0,0,0);border: 0;right: 0;top: 11px"
                                   icon="el-icon-search" @click="search()"></el-button>
                    </div>
                    <!--搜索框结束-->
                </el-menu>
            </div>
            <!--蓝色导航条结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">

            <!--商品列表开始-->
            <el-row :gutter="20">
                <el-col :span="6" v-for="p in productArr">
                    <el-card>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                            <img class="p_img" :src="p.url" width="230" height="230" alt="">
                            </a>
                        </div>
                        <div>
                            <a style="color: black;text-decoration: none" :href="'/detail.html?id='+p.id">
                            <p style="font-size: 15px;margin-top: 0;height: 38px">{{p.title}}</p>
                            </a>
                            <div style="color: #6c6c6c">
                                <span>￥{{p.price}}</span>
                                <span style="font-size: 12px;
                                text-decoration: line-through">{{p.oldPrice}}</span>
                                <span style="float: right">销量:{{p.saleCount}}件</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表结束-->
        </el-main>
        <el-footer style="padding: 0">
            <div style="background-image: url('imgs/wave.png');
                    height: 95px;margin-bottom: -30px"></div>
            <div style="background-color: #3f3f3f;height: 100px;
                    font-size: 14px;color: #b1b1b1;
                    text-align: center;padding: 30px">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                categoryArr:[],
                bannerArr:[],
                topArr:[],
                productArr:[],
                currentIndex:"",
                wd:""
            }
        },
        created:function () {
            //发请求获取所有分类信息
         axios.get("/category/select").then(function (rs) {
             //此处是子线程请求玩数据回调回来的位置
             //此时Vue对象早以实例化完成
             //此时的this代表的已不是Vue对象而是window对象
             v.categoryArr = rs.data;
         })
            //发送请求获取当前分类下的所有信息所有商品信息
            //得到地址栏中的分类id
            //判断地址栏中包含的是wd还是cid
            if (location.search.indexOf("cid")!=-1){//包含cid
                //发出请求获取当前分类下的所有的商品信息
                //得到地址栏中的分类id
                let cid = location.search.split("=")[1];
                //在created方法中v变量还没有创建完 不能访问v变量 此时通过this代替v
                //没创建完指在实例化的过程中调用的created方法,实例化完之后才允许访问v变量
                //this代表当前正在实例化的Vue对象 通过this也可以访问到Vue里面的变量
                this.currentIndex = cid;
                //通过分类id发出查询请求
                axios.get("/product/select/category?cid="+cid).then(function (response) {
                    //此处是子线程请求完数据回调回来的位置
                    //此时Vue对象早已实例化完成
                    //此时的this代表的已不是Vue对象而是window对象
                    v.productArr = response.data;
                })
            }else{//包含wd搜索关键字
                //得到搜索的关键字wd
                let wd = location.search.split("=")[1];
                axios.get("/search?wd="+wd).then(function (response) {
                    v.productArr = response.data;
                })
            }

        },
        methods:{
            handleSelect(index){
                console.log(index);
                //查询点击分类下的商品信息
                axios.get("/product/select/category?cid="+index).then(function (rs) {
                    v.productArr = rs.data;
                })
            },
            search(){
                axios.get("/search?wd="+v.wd+"&id="+v.currentIndex).then(function (rs) {
                    v.productArr = rs.data;
                })
            }
        }
    })
</script>
</html>